<template>
    <view>
        <navigationBar :bgType="3" :backType="2" navigationTitle="充值" />

        <view class="wrap safe-area">
            <image
                class="wrap-bg"
                :src="getImageURL('navigationBar/top_bg.png')"
                mode="widthFix"
                :style="{ '--navigation-height': navigationHeight + 'px' }"
            />

            <view class="wrap-balance">
                <view class="balance-top fb-28"> 当前余额(元) </view>

                <view class="balance-center flex align-center just-between">
                    <view>
                        <text class="fb-28 symbol">¥</text>
                        <text class="fb-52">{{ money || 0 }}</text>
                    </view>

                    <image
                        :src="getImageURL('technician/recharge/gr_balance.png')"
                    />
                </view>

                <view class="balance-bottom flex align-center">
                    <!-- <view class="item f-28" @click="onCommission">
                        佣金流水
                    </view>
                    <view class="line"> </view> -->
                    <view class="item f-28" @click="onRecords"> 充值记录 </view>
                    <view class="line"> </view>
                    <view class="item f-28" @click="onConsumption">
                        消费明细
                    </view>
                </view>
            </view>

            <view class="wrap-recharge-list">
                <view class="list-title fb-32"> 选择充值金额 </view>

                <view class="recharge-list flex just-between">
                    <block v-for="(item, index) in list" :key="index">
                        <view
                            class="item bg-img-set flex column just-between"
                            :class="
                                selectId == item.id
                                    ? 'item-select'
                                    : 'item-normal'
                            "
                            @click="onItem(index)"

                        >
                            <view class="item-recharge flex align-center">
                                <text class="fb-24 symbol">充</text>
                                <text class="fb-56">{{ item.price || 0 }}</text>
                            </view>

                            <view
                                class="item-send flex align-center just-end fb-28"
                            >
                                <text>送</text>
                                <text>{{ item.present || 0 }}</text>
                            </view>
                        </view>
                    </block>
                </view>
            </view>

            <view class="wrap-recharge-style">
                <view
                    class="technician-bg flex align-center just-between"
                    @click="onChooseTechnician()"
                >
                    <view class="left fb-32"> 选择为服务师充值 </view>

                    <view class="right flex align-center just-end">
                        <view class="value f-26">
                            {{ service_name || "请选择" }}
                        </view>

                        <image
                            class="arrow"
                            :src="getImageURL('common/arrow.png')"
                        />
                    </view>
                </view>

                <view class="pay-methods">
                    <payMethods :showMethods="2" :status.sync="pay_methods" />
                </view>
            </view>

            <explain :content="ChargeDescription" />

            <view class="recharge-btn f-32" @click="onRecharge">
                充值并支付
            </view>
        </view>
    </view>
</template>

<script>
import st from "@/utils/showtoast.js";
import payMethods from "@/subPages/components/payMethods/payMethods.vue";
import explain from "@/subPages/components/contentExplain/contentExplain.vue";
import { rechargeList, applyRecharge } from "@/API/API/recruit.js";
export default {
    components: {
        payMethods,
        explain,
    },
    data() {
        return {
            navigationHeight: this.$navigationHeight,
            list: [],
            pay_methods: "h5",
            ChargeDescription: "充值说明",

            money: 0,

            selectId: 0,

            service_id: "",

            service_name: "",
        };
    },
    onReady() {
        uni.$on("chooseTechnician", (info) => {
            this.service_id = info.id;
            this.service_name = info.name;
            this.getData();
        });
    },
    onUnload() {
        uni.$off("chooseTechnician");
    },
    onLoad() {
        this.getData();
    },
    methods: {
        getData() {
            rechargeList().then((res) => {
                this.list = res.data.list;
                this.money = res.data.money;
                this.ChargeDescription = res.data.ChargeDescription;
            });
        },
        /**
         * 佣金流水
         */
        onCommission() {
            uni.navigateTo({
                url: "/subPages/technician/mine/commissionDetail",
            });
        },
        /**
         * 充值记录
         */
        onRecords() {
            uni.navigateTo({
                url: "/subPages/technician/mine/rechargeRecords",
            });
        },
        /**
         * 充值列表选中
         */
        onItem(index) {
            this.list.forEach((item, i) => {
                if (i === index) {
                    this.selectId = item.id;
                }
            });
        },
        /**
         * 选择技师
         */
        onChooseTechnician() {
            uni.navigateTo({
                url: "/subPages/technician/mine/chooseTechnician",
            });
        },
        // 消费明细
        onConsumption() {
            uni.navigateTo({
                url: "/subPages/technician/mine/spendingDetails",
            });
        },
        onRecharge() {
            if (this.selectId == 0) {
                uni.showToast({
                    title: "请选择充值金额",
                    icon: "none",
                });
                return;
            }
            applyRecharge({
                combo_id: this.selectId,
                pay_method: "h5",
                technician_id: this.service_id,
            })
                .then((res) => {
                    WeixinJSBridge.invoke(
                        "getBrandWCPayRequest",
                        Object.assign(res.data),
                        (result) => {
                            if (
                                result.err_msg == "get_brand_wcpay_request:ok"
                            ) {
                                st.success("支付成功", () => {
                                    uni.reLaunch({
                                        url: "/subPages/technician/tabBar/mine",
                                    });
                                    return;
                                });
                            } else {
                                st.show("支付失败", () => {
                                    return;
                                });
                            }
                        }
                    );
                })
                .catch((err) => {
                    uni.showToast({
                        title: err.msg,
                        icon: "none",
                    });
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap {
    position: relative;
    z-index: 1;
    padding-left: 30rpx;
    padding-right: 30rpx;
    box-sizing: border-box;

    .wrap-balance {
        margin-top: 50rpx;
        width: 100%;
        height: 331rpx;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        overflow: hidden;
        border-radius: 20rpx;
        z-index: 2;
        background: url("../../../static/static/technician/recharge/balance_bg.png")
            no-repeat;
        background-size: 100% 100%;

        > view {
            position: absolute;
            left: 0;
            z-index: 3;
            overflow: hidden;
        }

        .balance-top {
            top: 62rpx;
            left: 36rpx;
            color: $theme-color;
        }

        .balance-center {
            top: 50%;
            transform: translateY(-50%);
            width: 100%;

            > view {
                margin-left: 36rpx;
                flex: 1;
                margin-right: 20rpx;
                overflow: hidden;
                color: $theme-color;

                .symbol {
                    margin-right: 12rpx;
                }
            }

            > image {
                width: 190rpx;
                height: 68rpx;
            }
        }

        .balance-bottom {
            bottom: 0;
            width: 100%;
            height: 92rpx;
            flex-wrap: wrap;
            background-color: $theme-color;

            .item {
                flex: 1;
                height: 92rpx;
                line-height: 92rpx;
                text-align: center;
                color: $bg-text-color;
            }

            .line {
                width: 2rpx;
                height: 28rpx;
                background-color: $bg-text-color;
            }
        }
    }

    .wrap-recharge-list {
        margin-top: 30rpx;
        width: 100%;
        overflow: hidden;
        background-color: white;
        border-radius: 20rpx;
        padding: 30rpx 30rpx 10rpx 30rpx;
        box-sizing: border-box;

        .list-title {
            color: $title-color;
        }

        .recharge-list {
            margin-top: 36rpx;
            width: 100%;
            overflow: hidden;
            flex-wrap: wrap;

            .item {
                width: 300rpx;
                height: 146rpx;
                margin-bottom: 30rpx;
                box-sizing: border-box;
                padding: 20rpx;

                .item-recharge {
                    width: 100%;
                    overflow: hidden;
                }

                .symbol {
                    margin-right: 10rpx;
                }

                .item-send {
                    width: 100%;
                    overflow: hidden;
                }
            }

            .item-normal {
                color: $theme-color;
                background: url("../../../static/static/technician/recharge/normal_bg.png") no-repeat;
                background-size: 100% 100%;
            }

            .item-select {
                color: $bg-text-color;
                background: url("../../../static/static/technician/recharge/choose_bg.png") no-repeat;
                background-size: 100% 100%;
            }
        }
    }

    .wrap-recharge-style {
        margin-top: 30rpx;
        width: 100%;
        background-color: white;
        border-radius: 20rpx;
        overflow: hidden;
        padding: 30rpx 20rpx 10rpx 30rpx;
        box-sizing: border-box;
        margin-bottom: 30rpx;

        .technician-bg {
            width: 100%;
            overflow: hidden;

            .left {
                color: $title-color;
            }

            .right {
                flex: 1;
                margin-left: 20rpx;

                .value {
                    margin-right: 16rpx;
                    flex: 1;
                    color: #999999;
                    text-align: right;
                }
            }
        }

        .pay-methods {
            margin-top: 20rpx;
            width: 100%;
            overflow: hidden;
        }
    }

    .recharge-btn {
        margin-top: 34rpx;
        width: 100%;
        height: 84rpx;
        line-height: 84rpx;
        text-align: center;
        overflow: hidden;
        border-radius: 20rpx;
        color: $bg-text-color;
        background-color: $theme-color;
    }
}
</style>
